<template>
	<view class="container">
		<view class="newslist">

			<view class="news-item" v-for="news in newsList" :key="news.nid">
				<navigator :url="'/pages/news/news?nid='+news.nid">
					<text class="ndate">{{news.ndate}}</text>
					<text class="news-title">{{news.ntitle}}</text>
				</navigator>
			</view>

		</view>
		<button class="loadbt" @click="loadMore()" v-if="isLoad">加载更多</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [],
				page: 1,
				pageSize: 5,
				isLoad: true,
			}
		},
		onLoad() {
			this.loadDate();
		},
		onShow() {
			console.log("show");
		},
		methods: {
			loadDate() {
				uni.showLoading({
					title: '拼命加载！'
				});
				uni.request({
					url: `http://localhost:8080/news/${this.page}/${this.pageSize}`,
					method: 'GET',
					success: (res) => {
						this.newsList = this.newsList.concat(res.data.data.records);
						let pages = res.data.data.pages;
						this.isLoad = this.page < pages;
					},
					fail() {
						uni.showToast({
							title: '请求接口失败！',
							icon: 'error'
						})
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			loadMore() {
				this.page++;
				this.loadDate();
			}
		}
	}
</script>

<style>
	.news-item {
		margin: 32rpx;
		background: url("") no-repeat 98% center;
		box-shadow: 0 0 16px #eeeded;
		padding: 32rpx;
		border-radius: 8rpx;
	}

	.ndate {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 20rpx;
	}

	.news-title {
		display: block;
		font-size: 32rpx;
		width: 92%;
	}

	.loadbt {
		width: 80%;
		font-size: 32rpx;
		background-color: #576b95;
		color: white;
		margin: 40rpx auto;
	}
</style>